<template>
  <div id="app">
    <!-- <div>
        <van-nav-bar
          title="购买记录"
          left-text="返回"
          left-arrow
         @click-left="onClickLeft"          
        />
      </div> -->
    <div style="padding: 10px;
    background: #d9d9d9;">
      <van-form>
        <van-field
          readonly
          style="border-radius: 10px;background: #f5f5f5;font-weight: 500;"
          clickable
          name="datetimePicker"
          :value="value"
          label="时间"
          placeholder="点击选择时间"
          @click="showPicker = true"
        />
        <van-popup
          v-model="showPicker"
          position="bottom"
        >
          <van-datetime-picker
            v-model="currentDate"
            type="year-month"
            title="选择年月"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />

        </van-popup>
      </van-form>
    </div>

    <div>
      <table width="100%">
        <tr
          style="background: #d9d9d9;"
          id="tr"
        >
          <td>品牌</td>
          <td>折扣</td>
          <td>数量</td>
          <td>折扣价</td>
          <td>零售单号</td>
          <td>购买日期</td>
        </tr>
        <tr
          v-for="(item,index) in list"
          :key="index"
          style="background: #f5f5f5;"
          id="list"
        >
          <td>{{ item.brand  }}</td>
          <td>{{ item.discount  }}</td>
          <td>{{ item.totQty  }}</td>
          <td>{{ item.totAmtActual  }}</td>
          <td>{{ item.docNo  }}</td>
          <td>{{ item.paytime  }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      value: '',
      time: '',
      showPicker: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
    }
  },

  mounted() {
    this.getTime()
    this.loadData()
  },
  computed: {
    linkid() {
      return localStorage.getItem('linkid')
    },
  },
    created:function(){
     document.title = '员工福利';
},
  methods: {
    formatter(type, val) {
      if (type === 'year') {
        this.year = val
        return `${val}年`
      } else if (type === 'month') {
        this.mouth = val
        return `${val}月`
      }
      return val
    },
    onConfirm() {
      this.value = this.year + '年' + this.mouth + '月'
      this.showPicker = false
      this.loadData()
    },
    getTime() {
      let nowDate = new Date()
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
      }
      if (date.month < 10) {
         this.time = date.year + '0' + date.month
        this.value = date.year + '年0' + date.month + '月'
      } else {
          this.time = date.year + '' + date.month
        this.value = date.year + '年' + date.month + '月'
      }
    },
    loadData() {
      if (this.year) {
        this.time = this.year + this.mouth
      }
      this.$http({
        url: '/api/gateway/basemgt-purchase/purchase/list',
        method: 'get',
        params: {
          linkid: this.linkid,
          // linkid: 192,
          billdate: this.time,
        },
      }).then((data) => {
        if (data.code == 200) {
          this.list = data.data
          if (this.list == '') {
            this.$toast('当前月份没有使用记录')
          }
        } else {
          this.$toast(data.msg)
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    },
  },
}
</script>
<style scoped>
#app {
  height: 100vh;
  background-image: url('./bg.jpg');
  text-align: center;
  color: #2c3e50;
  font-size: 16px;
}
#tr td {
  border: 1px solid #c8c9cc;

  font-size: 12px;
}
#list td {
  border: 1px solid #c8c9cc;
  font-size: 12px;
}
</style>